<template>
  <div class="msg-box">
    <div style="margin-bottom: 10px;"  v-for="item1 in detailData" :key="item1">
      <div class="msg-box-msg1">
        <img src="/img/user.png" class="msg-box-msg1-img"/>
      </div>
      <div class="msg-box-department">
        {{item1.depart}}
      </div>
      <div class="msg-box-time">
        {{item1.time}}
      </div>
      <div style="background: #f5f5f5;margin-left: 32px;margin-right: 12px;padding-bottom: 7px;padding-top: 7px;">
          <label class="msg-box-input">{{item1.msg}}</label>
          <a :href ="item1.url" v-if="item1.value"><font color="red">&nbsp;&nbsp;&nbsp;&nbsp;附件：反馈材料.doc</font></a>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "detailGroup",
    props: {
      detailData: {
        type: Array,
        default: () => []
      }
    }
  };
</script>

<style lang="scss">
  .msg-box{
    display-inside: ruby;
  }
  .msg-box-msg1{
    height: 20px;
    width: 17px;
    margin-left: 10px;
    margin-top: 10px;
    display:inline;
    margin-bottom: -7px;
  }
  .msg-box-msg1-img{
    height: 21px;
    width: 18px;
    margin-top: 7px;
  }
  .msg-box-department{
    display:inline;
    font-size: 16px;
    margin-top: 15px;
  }
  .msg-box-time{
    display:inline;
    font-size: 14px;
    margin-top: 15px;
    margin-right: 10px;
    padding-left: 83%;
  }
  .msg-box-input{
    width: 95%;
    margin-left: 31px;
    background: #f5f5f5;
  }


</style>
